<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>JSP - Hello World</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <style>
        #row {
            width: 600px;
            margin: 50px auto;
        }

        h2 {
            text-align: center;
        }

        #mbody {
            overflow-x: scroll;
            padding: 10px;
            width: 100%;
            height: 400px;
            border: 1px solid black;
        }

        textarea {
            width: 80%;
            padding: 10px;
        }

        #userListRow {
            float: left;
        }
    </style>
</head>
<body>

<div id="userListRow">
    当前在线人数: <span id="currentUserCount">0</span>
    <ul id="userList">

    </ul>


</div>


<div id="row">
    <h2>22K的聊天室</h2>
    <div id="mbody">

    </div>
    <div>
        <div class="form-group">
            <textarea class="form-control" id="input" rows="3" placeholder="在这里输入内容...回车键发送"></textarea>
        </div>
        <button id="btn" class="btn btn-outline-success" onclick="send()">发送</button>
    </div>


</div>

<script>
    var $mbody = $("#mbody");
    var $input = $("#input");
    var $userList = $("#userList");
    var $currentUserCount = $("#currentUserCount");

    var divIdNumber = 0;

    let username = prompt("请输入用户名加入聊天", "捣乱者");
    if (username == "") {
        username = "捣乱者";
    }


    var ws = new WebSocket("ws://10.8.162.54:8080/websocket/" + username);

    /**
     * 当打开连接时的事件
     */
    ws.onopen = function () {
        console.log("打开websocket");
    }

    /**
     * 接收到消息的处理事件
     * @param event
     */
    ws.onmessage = function (event) {
        let data = event.data;
        let jsonObj = JSON.parse(data);

        if (jsonObj.code === 0 || jsonObj.code === -1 || jsonObj.code === 200) {
            //系统消息
            let msg = $("<div class=\"alert alert-primary\" role=\"alert\" id='d" + divIdNumber + "' style='text-align: center'> <h5>" + jsonObj.name + "</h5> <p>" + jsonObj.text + "</p>  </div>");
            $mbody.append(msg);
            // document.location = location.pathname + "#d" + (divIdNumber++)
        } else if (jsonObj.code === 1) {
            //发送消息模式
            let msg = $("<div class=\"alert alert-primary\" role=\"alert\" id='d" + divIdNumber + "'> <h5>" + jsonObj.name + "</h5> <p>" + jsonObj.text + "</p> </div>");
            $mbody.append(msg);
            // $mbody.scrollTop = 1000;
            // document.location = location.pathname + "#d" + (divIdNumber++)
        }
        let currentUserCount = jsonObj.currentUserCount;    //获取当前在线的人数
        $currentUserCount.html(currentUserCount);

        $userList.html("");    //先清空列表
        for (let i = 0; i < currentUserCount; i++) {
            $userList.append("<li>" + jsonObj.userList[i] + "</li>");
        }


        //始终将滑条划到最底
        $mbody[0].scrollTop = $mbody[0].scrollHeight

        console.log(jsonObj);
    }

    ws.onclose = function () {
        alert("你已下线,请尝试刷新")
    }

    ws.onerror = function () {

    }

    /**
     * 发送按钮的点击事件
     */
    function send() {
        let text = $input.val();
        if (text == "") {
            alert("请输入内容");
            return;
        }

        ws.send(text);
        $input.val("");
    }

    $input.keyup(function (event) {
        if (13 == event.keyCode) {
            send();     //等于点击了发送按钮
            $input.focus(); //拉回焦点
        }
    });


</script>


</body>
</html>